/* purgecss start ignore */
.light-mode .nuxt-content {
  h2,
  h3,
  p {
    color: theme('colors.light.onSurfacePrimary');
  }

  blockquote {
    color: theme('colors.light.onSurfaceSecondary');
  }

  & a {
    @apply text-nuxt-lightgreen;

    &:hover {
      @apply underline;
    }

    & code {
      @apply text-nuxt-lightgreen;

      &:hover {
        @apply text-nuxt-green;
      }
    }
  }
  // inline code snippet
  & code {
    @apply bg-gray-100 text-red-500;
  }

  & pre {
    @apply static;

    background-color: theme('colors.dark.elevatedSurface');

    code {
      color: theme('colors.dark.onSurfacePrimary');
    }
  }
  // code snippet block
  & pre {
    code {
      @apply bg-transparent;

      color: theme('colors.dark.onSurfacePrimary');
    }
  }

  & .Alert {
    @apply bg-blue-100 text-light-onSurfacePrimary;

    & a {
      @apply text-blue-600;
    }

    & code {
      @apply text-blue-800 bg-blue-200;
    }

    &.Alert--orange {
      @apply bg-orange-100;

      & a {
        @apply text-orange-600;
      }

      & code {
        @apply text-orange-800 bg-orange-200;
      }
    }
  }

  .Promote {
    // @apply shadow-md;
    background-color: theme('colors.gray.200');

    .Promote__Content {
      .Promote__Content__Title {
        color: theme('colors.light.onSurfacePrimary');
      }

      .Promote__Content__Description {
        color: theme('colors.light.onSurfaceSecondary');
      }

      .Promote__Content__Signature {
        @apply text-gray-500;
      }
    }

    &:hover {
      // @apply shadow-lg;
      background-color: theme('colors.gray.300');
      text-decoration: none;
    }
  }
}

.dark-mode .nuxt-content {
  h2,
  h3,
  p {
    color: theme('colors.dark.onSurfacePrimary');
  }

  & blockquote {
    color: theme('colors.dark.onSurfaceSecondary');
  }

  & a {
    @apply text-nuxt-lightgreen;

    &:hover {
      @apply underline;
    }

    & code {
      @apply text-nuxt-lightgreen;

      &:hover {
        @apply text-nuxt-green;
      }
    }
  }
  // inline code snippet
  & code {
    @apply bg-gray-800;

    color: #e1e8f5;
  }
  // code snippet block
  & pre {
    background-color: #1e344c;

    code {
      @apply bg-transparent;

      color: theme('colors.dark.onSurfacePrimary');
    }
  }

  & .Alert {
    // @apply bg-gray-600 text-dark-onSurfacePrimary;
    background-color: #205d80;

    & a {
      @apply text-blue-300;
    }

    & code {
      @apply text-blue-800 bg-blue-200;
    }

    &.Alert--orange {
      // @apply bg-orange-200;
      background-color: #4c4c4c;

      & a {
        @apply text-orange-600;
      }

      & code {
        @apply text-orange-800 bg-orange-200;
      }
    }
  }

  .Promote {
    @apply shadow-md;

    background: theme('colors.dark.surface');

    .Promote__Content {
      .Promote__Content__Title {
        color: theme('colors.dark.onSurfacePrimary');
      }

      .Promote__Content__Description {
        color: theme('colors.dark.onSurfaceSecondary');
      }

      .Promote__Content__Signature {
        @apply text-gray-500;
      }
    }

    &:hover {
      @apply shadow-lg;

      background-color: #233344;
      text-decoration: none;
    }
  }
}

.nuxt-content {
  img {
    @apply rounded;

    margin: auto;
  }

  video {
    width: 100%;
  }

  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    & a {
      margin: 0 -1.5rem 0 -1.5rem;
      padding: 0 1.5rem 1.7rem 0;
    }

    & a,
    .icon-link {
      @apply float-left;

      display: inline-block;
      height: 14px;
      margin-top: 8px;
      position: relative;
      width: 14px;

      & .icon-link {
        background-image: url('~assets/images/link.svg');
        background-size: 14px 14px;
        visibility: hidden;
      }
    }

    &:hover {
      & .icon-link {
        visibility: visible;
      }
    }
  }

  & h2 {
    @apply relative text-2xl table my-8;

    &::after {
      content: ' ';
      width: 80%;

      @apply block border-2 border-nuxt-green mt-2 mb-1 rounded border-solid;
    }

    & code {
      @apply text-xl;
    }

    & a.icon-link {
      @apply pt-3;
    }
  }

  & h3 {
    @apply relative text-xl table my-8;

    &::after {
      content: ' ';
      width: 80%;

      @apply block border-2 border-gray-600 mt-2 mb-1 rounded border-solid;
    }

    & code {
      @apply text-lg;
    }

    & a.icon {
      @apply pt-2;
    }
  }

  p {
    @apply leading-relaxed py-1 mb-2 transition-colors duration-300 ease-linear;
  }

  & li p {
    @apply inline-block;
  }

  & blockquote {
    @apply italic leading-loose;
  }

  & code {
    @apply p-1 not-italic rounded text-sm;
  }

  & a {
    overflow-wrap: break-word;

    &:hover {
      @apply underline;
    }
  }
  // code snippet block
  & pre {
    @apply rounded p-2 my-2 overflow-auto;

    & code {
      @apply bg-transparent p-0;
    }
  }

  & b,
  & strong {
    @apply font-bold;
  }

  & .Alert {
    @apply px-4 py-2 rounded my-4;

    p {
      @apply mb-0;
    }
  }

  & .Promote {
    @apply flex flex-col p-4 my-4 rounded;

    & img {
      height: auto;
      width: 100%;

      @apply mb-3 rounded;

      @screen sm {
        max-width: 240px;

        @apply mb-0;
      }
    }

    & .Promote__Content {
      & .Promote__Content__Title {
        @apply text-xl;
      }

      & .Promote__Content__Description {
        @apply leading-relaxed py-1 pb-4 text-sm;
      }

      & .Promote__Content__Signature {
        @apply text-xs m-0 p-0 leading-none;
      }
    }

    @screen sm {
      @apply flex-row;

      & .Promote__Content {
        @apply pl-4;
      }
    }
  }
}
// lists
.nuxt-content {
  & ul,
  & ol {
    @apply list-inside py-1 pl-1;

    & li {
      @apply py-2;
    }

    & ul,
    & ol {
      @apply pl-4 pt-1;
    }
  }

  & ol {
    @apply list-decimal;
  }

  & ul {
    @apply list-disc;
  }
}

/* highlight page in corner of code */
.nuxt-content-highlight {
  @apply relative;

  & > .filename {
    @apply absolute right-0 top-0 text-gray-400 font-light z-10 mr-2 mt-1 text-sm;
  }

  & > .copy {
    @apply hidden absolute right-0 bottom-0 leading-none shadow-lg px-1 py-1 text-white bg-gray-800 text-sm uppercase rounded-md border border-white font-semibold mr-2 mb-2;
    &:hover {
      @apply bg-gray-700;
    }
    &:focus {
      @apply outline-none bg-gray-900;
    }
  }

  &:hover {
    & > .copy {
      @apply block;
    }
  }
}

.nuxt-content {
  .token.comment {
    color: #acb5b9;
  }
}

/* purgecss end ignore */
